<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> 
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>


<f:view>
    <a4j:keepAlive beanName="eventsDisplayBean"/>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>EvIn | Display Event</title>
            <link rel="stylesheet" href="/EvIn/styles/styles.css" type="text/css" />
            <a4j:loadScript src="/static/js/fayde.js"/>

        </head>

        <body>

            <div id="wrapper">
                <div class="header">
                    <jsp:include page="/common/header.jsp"></jsp:include>
                </div>

                <div class="fullpane">
                    <div class="leftpane">
                        <jsp:include page="/common/main_menu.jsp"></jsp:include>
                    </div>
                    <div class="rightpane">
                        <div id="header" style="width: 100%;height: 20px;font-size: 11px; text-align: right" >
                            <div style="position: relative;top: 3px;left: -15px">
                                <h:form rendered="#{not registeredUserBean.loggedIn}">
                                    <h:outputText value="Login "/>
                                    <h:outputLink value="/EvIn/index.faces?next=event/event_display.faces?eventId=#{eventsDisplayBean.eventId}%26contactId=#{eventsDisplayBean.contactId}%26code=#{eventsDisplayBean.code}" >
										here
                                    </h:outputLink>
                                    <h:outputText value= " or register " />
                                    <h:commandLink value="here  " action="register"/>
                                </h:form>
                            </div>
                        </div>
                        <br/>
                        <div class="contentTitle">Event info</div>

                        <br/>
                        <div>
                            <div style="float:left;width: 100%;width:50%">
                                <b>Name</b><br/>
                                <h:outputText value="#{eventsDisplayBean.event.name}"/>
                                <br/>
                                <b>Location</b><br/>
                                <h:outputText value="#{eventsDisplayBean.event.location}"/>
                                <br/>
                                <b>Start time</b><br/>
                                <h:outputText value="#{eventsDisplayBean.event.startTime}">
                                    <f:convertDateTime pattern="dd.MMM.yyyy HH:mm"/>
                                </h:outputText>
                                <br/>
                                <b>End time</b><br/>
                                <h:outputText value="#{eventsDisplayBean.event.endTime}">
                                    <f:convertDateTime pattern="dd.MMM.yyyy HH:mm"/>
                                </h:outputText>
                                <br/>
                                <b>Respond before</b><br/>
                                <h:outputText value="#{eventsDisplayBean.event.responseTime}">
                                    <f:convertDateTime pattern="dd.MMM.yyyy HH:mm"/>
                                </h:outputText>
                                <br/>
                                <b>Creator</b><br/>
                                <h:outputText value="#{eventsDisplayBean.event.registeredUser.firstName} #{eventsDisplayBean.event.registeredUser.lastName}"/>
                                <br/>
                                <b>Description</b><br/>
                                <h:outputText value="#{eventsDisplayBean.event.description}"/>
                                <br/>
                            </div>
                            <div style="float:right">
                                <h:graphicImage url="../../EvIn/image/event/#{eventsDisplayBean.event.id}" width="200" height="200"/>
                            </div>

                            <div style="clear:both">
                                <br/>

                                <a4j:commandLink value="People Attending ..." onclick="Richfaces.showModalPanel('invitation_overview'); return false;" reRender="invitation_form"/>
                            </div>
                            <br/>
                            <div align="center">
                                <h:form id="display_panel">
                                    <rich:panel rendered="#{eventsDisplayBean.contact != null && not eventsDisplayBean.eventResponseTimePassed}" style="border:none;">
                                        <b>RSVP:</b>
                                        <h:selectOneRadio id="rsvp" value="#{eventsDisplayBean.rsvp}" style="font-size: 11px" >
                                            <f:selectItem itemValue="1"     itemLabel="Attending" />
                                            <f:selectItem itemValue="0"  itemLabel="NotAttending" />
                                        </h:selectOneRadio>
                                        <a4j:commandLink id="show_invites" value="Submit Attendance" actionListener="#{eventsDisplayBean.handleAttendance}" reRender="invitation_form" oncomplete="faydeinout()">
                                        </a4j:commandLink>

                                        <div style="opacity: 0" id="confirmation_attendance">
                                            Attendance Submited
                                        </div>


                                    </rich:panel>
                                    <rich:panel rendered="#{eventsDisplayBean.eventResponseTimePassed}" style="border:none">
                                        Response deadline for this event is closed.
                                    </rich:panel>
                                </h:form>
                            </div>
                        </div>

                        <br/>

                        <div align="center">
                            <div class="contentTitle">Comments</div>
                            <br/>
                            <h:form id="comment_form">
                                <div id="comments">
                                    <c:forEach var="comment" items="${eventsDisplayBean.comments}">
                                        <div style="width: 450px;background-color: #EEEEEE;border:1px solid black; word-wrap: break-word;margin-left: 5px">
                                            <div style="margin-left: 7px;padding-top: 7px;width:90%;text-align: left">
                                                <span style="color: #3B5998;">${comment.registeredUser.email}</span> : ${comment.text}
                                            </div>
                                            <br/>
                                            <div align="right" style="color: #808080;font-size: 10px" >
                                                <fmt:formatDate value="${comment.created}" pattern="HH:mm dd.MMM.yyyy"/>
                                            </div>
                                        </div>
                                        <br/>
                                    </c:forEach>
                                </div>
                                <h:panelGrid columns="1" rendered="#{registeredUserBean.loggedIn}">
                                    <h:outputLabel value="Comment [500]" for="comment_text" style="font-size: 11px"/>
                                    <h:inputTextarea rows="3" style="width: 450px;max-width: 450px;height: 100px;max-height: 100px" id="comment_text" value="#{eventsDisplayBean.newComment.text}" required="true" requiredMessage="Message Required">
                                        <f:validateLength maximum="500"/>
                                    </h:inputTextarea>
                                    <h:message for="comment_text" errorClass="error_message"/>
                                    <a4j:commandButton actionListener="#{eventsDisplayBean.addCommentAction}" value="Submit" reRender="comment_form"/>
                                </h:panelGrid>
                            </div>
                        </h:form>
                        <rich:modalPanel id="invitation_overview" autosized="true" moveable="false">
                            <f:facet name="header">
                                <h:outputText value="Ivitations" />
                            </f:facet>
                            <f:facet name="controls">
                                <h:form>
                                    <h:commandLink value="Close" immediate="true" onclick="Richfaces.hideModalPanel('invitation_overview'); return false;"/>
                                </h:form>
                            </f:facet>

                            <a4j:form id="invitation_form">
                                <div style="height:500px ; width:600px; overflow:auto">
                                    <rich:dataTable  align="center"
                                                     style="text-align:center;width:95%;"
                                                     value="#{eventsDisplayBean.eventInvitations}"
                                                     var="invite"
                                                     rowKeyVar="index"
                                                     id="invite_table" >
                                        <rich:column>
                                            <f:facet name="header"><h:outputText value="Invite Name"/></f:facet>
                                            <h:outputText value="#{invite.contact.firstName}" />
                                            <h:outputText value=" #{invite.contact.lastName}" />
                                        </rich:column>
                                        <rich:column>
                                            <f:facet name="header"><h:outputText value="Invite Email"/></f:facet>
                                            <h:outputText value="#{invite.contact.email}" />
                                        </rich:column>
                                        <rich:column>
                                            <f:facet name="header"><h:outputText value="Invite Status"/></f:facet>
                                            <h:outputText value="#{invite.status}" />
                                        </rich:column>
                                    </rich:dataTable>


                                </div>

                            </a4j:form>
                        </rich:modalPanel>

                    </div>
                </div>
            </div>

        </body>
    </html>

</f:view>

